.message-list {
  min-height: 100%;
  padding: 10upx 24upx;
  box-sizing: border-box;

  .message-list-item {
    width: 100%;

    &__time {
      width: 100%;
      text-align: center;
      margin: 12px 0;
      color: #999999;
      font-size: 11px;
    }

    .message-item {
      display: flex;
      margin: 12px 0;

      .message-item-inner {
        display: flex;
        align-items: flex-end;
        gap: 10px;

        &.half-width {
          width: 50%;
        }

        .message-item__avatar {
          flex-shrink: 0;
        }

        .message-item__content {
          flex: 1;
          width: 0;
        }

        // 文字消息
        .message-item__text {
          max-width: 270px;
          min-width: 50px;
          min-height: 44px;
          padding: 11px 12px;
          font-size: 15px;
          line-height: 22px;
          color: #333;
          background: #ffffff;
          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
          border-radius: 8px 8px 8px 0;
        }

        // 图片消息
        .message-item__image {
          max-width: 120px;
          max-height: 120px;
          border-radius: 8px;
        }

        // 文件消息
        .message-item__file {
          line-height: 32px;

          .u-link,
          text {
            line-height: 32px !important;
          }
        }
      }
    }

    &.out {
      .message-item {
        flex-direction: row-reverse;

        .message-item-inner {
          flex-direction: row-reverse;

          .message-item__content {
            display: flex;
            flex-direction: row-reverse;
          }

          .message-item__text {
            color: #fff;
            background: #39b575;
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
            border-radius: 8px 8px 0 8px;
          }

          .chat-position {
            border-radius: 8px 8px 0 8px;
          }
        }
      }
    }
  }
}
